$(function () {
    $(".top").load("./index-top.html", function () {

    })

    $(".top2").load("./index-top2.html", function () {

    })

    $(".top4").load("./index-top3.html", function () {
        // $(".category .menu").css({"background-color":"#FFF"})
        $("#topCategoryMenu .menu").css({ "display": "none" })
        $(".category").css({ "display": "none" })
        $(".cate-menu-box a").css({ "color": "#6E6568" })

        $(".all-category").on("mouseenter", function () {
            $(".category").css({ "display": "block" })
            $("#topCategoryMenu .menu").css({
                "display": "block",
                "background-color": "#fff",
                "color": "#6E6568"
            })

            $("#topCategoryMenu .menu").children(".cate-menu-item").on("mouseenter", function () {
                //li得背景颜色
                $(this).css({ "background": "#ccc" }).siblings().css("background", "");
                $(this).find(".cate-part").css({
                    "display": "block"
                })
            }).on("mouseleave", function () {
                $(this).find(".cate-part").css({
                    "display": "none"
                })
                //li得背景颜色
                $(this).css("background", "");
            })

        }).on("mouseleave", function () {
            $(".category").css({ "display": "none" })
            $("#topCategoryMenu .menu").css({ "display": "none" })
        })

    })

    $(".detial-con").load("./detial-con.html", function () {
        //中间内容得tab切换
        $(".ncs-goods-tabbar li").on("click", function () {
            var index = $(this).index();
            $(this).addClass("current").siblings().removeClass("current");
            $(".ncs-goods-content li").eq(index).addClass("target").siblings().removeClass("target");
        })

        //固定导航栏
        var oTop = 760;
        $(window).scroll(function () {
            var scrollTop = $(this).scrollTop();
            if (scrollTop >= oTop) {
                $(".static").css({
                    "display": "block",
                    "position": "fixed",
                    "top": "0px"
                })
                $(".title-box .title").on("mouseenter", function () {
                    $(this).css({
                        "margin": "10px 10px"
                    })

                    $(".title-box img").show()

                    $(".title-box").css({
                        "border": "1px solid #E5E5E5",
                        "border-top": "none",
                    })

                }).on("mouseleave", function () {
                    $(this).css({
                        "margin": "10px 11px"
                    })
                    $(".title-box img").css({
                        "display": "none"
                    })

                    $(".title-box").css({
                        "border": ""
                    })
                })
            } else {
                $(".static").css({
                    "display": "none",
                })
            }
        })

        $(".ncs-goods-tabbar li").on("click", function () {
            $("body,html").animate({
                "scrollTop": oTop
            })
        })

        //页面渲染
        //页面加载就要得到id，把id发送到后台得到相应的数据，
        var getData;
        let pid = location.search.split("?")[1].split("=")[1]
        //在把数据渲染到页面上
        $.get(`./api/getproduct?id=${pid}`).then((res) => {
            console.log(res)
            // console.log(res.data[0]);

            // //放大镜中图
            $("#middleImg img").attr("src", res[0].img_middle[0]);
            //放大镜大图
            $("#bigArea img").attr("src", res[0].img_Big[0]);
            //放大镜得小图
            $("#box>#small>ul>li").each(function (el, index) {
                var index = $(this).index()
                $(this).children().attr("src", res[0].img_small[index]);
            })

            //商品名称等
            $(".ncs-goods-summary>.ncs-goods-name>h1").text(res[0].p_name)
            $(".ncs-goods-summary>.ncs-goods-name>strong").text(res[0].p_dep)
            $(".ncs-meta>.goods-price .integer").text(res[0].p_price)

            //放大镜效果
            $("#small ul").on("click", "li", function () {
                var index = $(this).index();
                //放大镜中图
                $("#middleImg img").attr("src", res[0].img_middle[index]);
                //放大镜大图
                $("#bigArea img").attr("src", res[0].img_Big[index]);
                // var $index = $(this).index();
                // $("#middleImg img").attr("src", `./images/img/${$index + 1}_2.jpg`);
                // $("#bigImg").attr('src', `./images/img/${$index + 1}_3.jpg`)
            })

            //比例
            var $oScale = $("#bigImg").width() / $("#middleImg").width();
            $("#middleImg").on("mouseenter", function () {
                $oScale = $("#bigImg").width() / $("#middleImg").width();
                //调整小区域的大小
                $("#middleArea").css({
                    "height": $("#middleImg").height() / $("#bigImg").height() * $('#bigArea').height(),
                    "width": $("#middleImg").width() / $("#bigImg").width() * $('#bigArea').width()
                })

                $("#middleArea").show();
                $("#bigArea").show();
            }).on("mouseleave", function () {
                $("#middleArea").hide();
                $("#bigArea").hide();
            }).on("mousemove", function (e) {
                var mX = e.pageX - $(this).offset().left - $('#middleArea').width() / 2;
                var mY = e.pageY - $(this).offset().top - $('#middleArea').height() / 2;
                if (mX <= 0) {
                    mX = 0
                }
                if (mY <= 0) {
                    mY = 0
                }
                if (mX >= $("#middleImg").innerWidth() - $('#middleArea').innerWidth()) {
                    mX = $("#middleImg").innerWidth() - $('#middleArea').innerWidth();
                }
                if (mY >= $("#middleImg").innerHeight() - $('#middleArea').innerHeight()) {
                    mY = $("#middleImg").innerHeight() - $('#middleArea').innerHeight();
                }
                $("#middleArea").css({
                    left: mX,
                    top: mY
                })
                // $oScale
                $('#bigImg').css({
                    left: -$oScale * mX,
                    top: -$oScale * mY,
                })
            })

            //委托实现数据得加加减减
            //--
            $("#rmNumValuePanel").on("click", "#mnBuyNumCutBtn", function () {
                var num = $(this).next("#mnBuyNumInput").val();
                console.log(111);
                console.log(num)
                if (num <= 1) {
                    return;
                }
                $(this).next("#mnBuyNumInput").val(--num);
            })
            //++
            $("#rmNumValuePanel").on("click", "#mnBuyNumAddBtn", function () {
                var num = $(this).prev("#mnBuyNumInput").val();
                $(this).prev("#mnBuyNumInput").val(++num);
            })

            getData = res[0]
        })

        //页面加载完成后就显示购物车数量
        $(".pf").load("./pf.html", function () {
            //侧边栏效果
            $(".nc-toolbar-tabs").children().on("mouseenter", function () {
                $(this).addClass("z-nc-tbar-tab-hover").siblings().removeClass("z-nc-tbar-tab-hover");
                $(".tab-tip").css({ "display": "none" })
            }).on("mouseleave", function () {
                $(this).removeClass("z-nc-tbar-tab-hover")
                $(".tab-tip").css({ "display": "block" })
            })

            $(".nc-toolbar-footer").on("click", function () {
                $("html,body").animate({
                    "scrollTop": 0
                }, 500)
            })

            //点击购物车，就跳转到购物车页面
            $(".nc-tbar-tab-cart").on("click", function () {
                window.location = "./shopCarts.html";
            })

            //加购物车时事查询
            // $("#tbarCartNum").css({
            //     "display": "block",
            // })

            var paramsPf = {
                uid: JSON.parse($.cookie("tokenUser") || '{}').u_id,
            }
            $.ajax({
                // url: "http://10.41.155.12:8080/api/getCunt",
                url: "/api/getCunt",
                type: "get",
                data: paramsPf,
            }).then((res) => {
                if (res.count >= 1) {
                    $("#tbarCartNum").css({ "display": "block" });
                    $("#tbarCartNum").text(res.count);
                }

            })
        })

        //加入购物车和购物车弹框和层级得显示与隐藏
        $(".cartBox").fadeOut()
        $("#addCartBtn").on("click", function () {
            var params = {
                uid: JSON.parse($.cookie("tokenUser") || '{}').u_id,
                cnum: $("#mnBuyNumInput").val(),
                cname: getData.p_name,
                cprice: getData.p_price,
                pid: getData.p_id,
                cimg: getData.img_small[0]
            }
            console.log(params);

            $.ajax({
                // url: "http://10.41.155.12:8080/api/addCart",
                url: "/api/addCart",
                data: params,
                type: "post"
            }).then((res) => {
                $(".pf").load("./pf.html", function () {
                    //加购物车时事查询
                    $("#tbarCartNum").css({
                        "display": "block",
                    })
                    console.log(JSON.parse($.cookie("tokenUser") || '{}').u_id)

                    var paramsPf = {
                        uid: JSON.parse($.cookie("tokenUser") || '{}').u_id,
                    }


                    $.ajax({
                        // url: "http://10.41.155.12:8080/api/getCunt",
                        url: "/api/getCunt",
                        type: "get",
                        data: paramsPf,
                    }).then((res) => {
                        if (res.count >= 1) {
                            $("#tbarCartNum").css({ "display": "block" });
                            $("#tbarCartNum").text(res.count);
                            $(".cartBox .success").children().eq(1).text("购物车共有" + res.count + "种商品")
                        }

                    })
                })
            })

            if (params) {
                console.log(params)
                //层级得显示与影藏
                $(".cengji").css({ "display": "block" })
                // $(".cartBox").fadeIn()
                $(".cartBox").css({ "display": "block" })

                $(".cengji").on("click", function () {
                    $(".cartBox").css({ "display": "none" })
                    $(".cengji").css({ "display": "none" })
                })

                $(".cartBox .success").children().eq(2).children().eq(1).on("click", function () {
                    $(".cartBox").css({ "display": "none" })
                    $(".cengji").css({ "display": "none" })
                })

                $(".cartMessage span").eq(1).on("click", function () {
                    $(".cartBox").css({ "display": "none" })
                    $(".cengji").css({ "display": "none" })
                })

                //弹框滚轮事件
                // var oTop2 = document.documentElement.clientHeight/2;
                // $(window).scroll(function () {
                //     // var scrollTop2 = $(this).scrollTop();
                //     // if (scrollTop2 >= oTop2) {
                //     $(".cartBox").css({
                //         "position": "fixed",
                //         "top":oTop2
                //         // "top": "30%",
                //         // "left":"39%",
                //     })
                //     // } else {
                //     //     $(".cartBox").css({
                //     //         "position": "absolute",
                //     //     })
                //     // }
                // })

                //弹框拖拽
                // var cartBoxLeft = $(".cartBox").offset().left;
                // var cartBoxTop = $(".cartBox").offset().top;
                $(".cartMessage").on("mousedown", function (e) {
                    // $(".cartBox").css({
                    //     "position": "static",
                    //     "left": cartBoxLeft,
                    //     "top": cartBoxTop
                    // })
                    var disX = e.pageX - $(this).offset().left;
                    var disY = e.pageY - $(this).offset().top;
                    // console.log(disX,disY)

                    $(document).on("mousemove", (e) => {
                        $(".cartBox")[0].style.left = e.pageX - disX + "px";
                        $(".cartBox")[0].style.top = e.pageY - disY + "px";
                    })

                    $(document).on("mouseup", function () {
                        $(document).off("mousemove mouseup")
                    })
                })
            }
        })
    })

    $(".footer").load("./index-footer.html", function () {
    })
})